<template>
  <a-drawer :width="800" title="钻杆" placement="right" v-model:visible="open">
    <a-steps :current="2">
      <a-step title="选择钻杆" />
      <a-step title="设置参数" description="" />
      <a-step title="完成" description="" />
    </a-steps>
    <template #extra> </template>
    <br />
    <el-button @click="openModal()" style="width: 100%">添加钻杆</el-button>
    <!-- 钻杆列表 -->
    <a-table :columns="columns" :data-source="dataSource" :scroll="{ x: 1000 }" :pagination="false">
      <template #bodyCell="{ column, text, record }">
        <template v-if="['bottom', 'top'].includes(column.dataIndex)">
          <div>
            <a-input-number v-if="editableData[record.id]" v-model:value="editableData[record.id][column.dataIndex]"
              style="margin: -5px 0" />
            <template v-else>
              {{ text }}
            </template>
          </div>
        </template>
        <template v-else-if="column.dataIndex === 'operation'">
          <div class="editable-row-operations">
            <span>
              <AntdZh><a-popconfirm title="确定删除该条记录 ?" @confirm="dele(record.id)">
                <a-button type="link" danger>删除</a-button>
              </a-popconfirm></AntdZh>
            </span>
          </div>
        </template>
      </template>
    </a-table>
    <AntdZh>
      <a-pagination v-model:current="query.pageNum" v-model:pageSize="query.pageSize" :total="total" @change="getList" />
    </AntdZh>

    <!-- 钻杆选择弹窗 -->
    <AntdConfirmModal title="钻杆选择" ref="modalRef" width="700px" :keepSlot="false" @confirm="add">
      <drillPipe></drillPipe>
      <a-form :model="items" name="basic" style="margin-top: 20px" :label-col="{ span: 8 }">
        <a-row>
          <a-col :pull="2" :span="12">
            <a-form-item label="顶部" name="top">
              <a-input-number v-model:value="items.top" style="width: 150px" :min="0" placeholder="请输入顶部" />
            </a-form-item>
          </a-col>
          <a-col :pull="2" :span="12">
            <a-form-item label="底部" name="bottom">
              <a-input-number v-model:value="items.bottom" style="width: 150px" :min="0" placeholder="请输入底部" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </AntdConfirmModal>
  </a-drawer>
</template>
<script setup>
import drillPipe from "@/custom/well/pages/structure/components/form/DrillPipeForm.vue";
import { cloneDeep } from "lodash-es";
import { drillpipesList, createDrillpipe, delDrillpipe } from "@/api/structure/structure.js";
import { initDrillPipe, updateDrillPipe, deleteDrillPipe } from "@/api/drillPipe.ts";
import useApp from "@/hooks";
import d3DrawStore from "@/store/modules/d3Draw";
const d3Draw = d3DrawStore();
const { $, proxy } = useApp();
const open = ref(false);
const total = ref(1);
const modalRef = ref(null);
const query = ref({ pageNum: 1, pageSize: 10, sortBy: "id", searchKey: "" });
const editableData = reactive({});
const dataSource = ref([]);
const drillPipeLine = ref([]);
const items = ref({
  top: 0,
  bottom: 0,
});
const data = reactive({
  form: {},
});
const { form } = toRefs(data);
const columns = [
  {
    title: "操作",
    dataIndex: "operation",
    id: "operation",
    width: 130,
  },
  {
    title: "公称尺寸(in)",
    dataIndex: "nominalSize",
    id: "nominalSize",
    width: 150,
  },
  {
    title: "顶部深度(m)",
    dataIndex: "top",
    id: "top",
    width: 150,
  },
  {
    title: "底部深度(m)",
    dataIndex: "bottom",
    id: "bottom",
    width: 150,
  },
  {
    title: "本体外径(mm)",
    dataIndex: "outerDiameter",
    id: "outerDiameter",
    width: 150,
  },
  {
    title: "本体内径(mm)",
    dataIndex: "innerDiameter",
    id: "innerDiameter",
    width: 150,
  },
];

function openDrawer() {
  open.value = true;
}
defineExpose({
  openDrawer: openDrawer,
});

//增
const add = () => {
  let pipeData = JSON.parse(localStorage.getItem("selectPipe"));
  let wellData = JSON.parse(localStorage.getItem("wellData"));
  items.value.wellId = wellData.wellId;
  items.value.wellRecordId = wellData.id;
  items.value.drillPipeRecordId = pipeData[0].id;
  createDrillpipe(items.value).then((res) => {
    modalRef.value.closeModal();
    getList();
    resetData();
  });
};
//删
const dele = (id) => {
  delDrillpipe(id).then((res) => {
    $.showToast({
      title: "删除成功",
      icon: "success",
    });
    dataSource.value.forEach((item, index) => {
      if (item.id == id) {
        deleteDrillPipe(drillPipeLine.value[index]);
      }
    })
    getList();
    delete editableData[id];
  });
};

// 井结构管理的钻杆信息
function getList() {
  dataSource.value.forEach((item, index) => {
    deleteDrillPipe(drillPipeLine.value[index]);
  })
  drillPipeLine.value = []
  let wellData = JSON.parse(localStorage.getItem("wellData"));
  console.log(wellData);
  drillpipesList(wellData.wellId).then((response) => {
    response.forEach((res) => {
      // drillPipeLine.value = initDrillPipe(d3Draw.$, d3Draw.d3Canvas, res.outerDiameter, res.top, res.bottom)
      drillPipeLine.value.push(initDrillPipe(d3Draw.$, d3Draw.d3Canvas, res.outerDiameter, res.top, res.bottom))
    });
    console.log("getList", response);
    dataSource.value = response;
    total.value = response.length;
  });
}
getList();

function openModal() {
  modalRef.value.openModal();
}
function resetData() {
  items.value.top = 0;
  items.value.bottom = 0;
}
</script>
